.loading {
  @apply block;
}
.loadingSpinner {
  animation: fuck-rotate 0.8s steps(12) infinite;
  @apply relative box-border max-w-full max-h-full;
}
.loadingSpinnerItem {
  @apply absolute top-0 left-0 w-full h-full;
  &.loadingSpinnerItem_1 {
    opacity: 1;
    transform: rotate(30deg);
  }
  &.loadingSpinnerItem_2 {
    opacity: 0.9375;
    transform: rotate(60deg);
  }
  &.loadingSpinnerItem_3 {
    opacity: 0.875;
    transform: rotate(90deg);
  }
  &.loadingSpinnerItem_4 {
    opacity: 0.8125;
    transform: rotate(120deg);
  }
  &.loadingSpinnerItem_5 {
    opacity: 0.75;
    transform: rotate(150deg);
  }
  &.loadingSpinnerItem_6 {
    opacity: 0.6875;
    transform: rotate(180deg);
  }
  &.loadingSpinnerItem_7 {
    opacity: 0.625;
    transform: rotate(210deg);
  }
  &.loadingSpinnerItem_8 {
    opacity: 0.5625;
    transform: rotate(240deg);
  }
  &.loadingSpinnerItem_9 {
    opacity: 0.5;
    transform: rotate(270deg);
  }
  &.loadingSpinnerItem_10 {
    opacity: 0.4375;
    transform: rotate(300deg);
  }
  &.loadingSpinnerItem_11 {
    opacity: 0.375;
    transform: rotate(330deg);
  }
  &.loadingSpinnerItem_12 {
    opacity: 0.3125;
    transform: rotate(360deg);
  }
  &::before {
    width: 4px;
    height: 25%;
    content: " ";
    background-color: var(--indicator-color, transparent);
    border-radius: 40%;
    @apply block mx-auto;
  }
}
@keyframes fuck-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
